<!DOCTYPE html>
<html>

<head>
    <title>定时弹出广告</title>

   
    <style>
        /* 限定容器  选择器*/
        #father {
            border: 0px solid red;
            width: 1300px;
            height: 2170px;
            margin: auto;
        }

        /* class选择器 */
        .top {
            border: 0px solid blue;
            width: 431px;
            height: 50px;
            float: left;
        }

        /* id选择器 */
        #top {
            padding-top: 12px;
            height: 38px;
        }

        #menu {
            border: 0px solid red;
            width: 1300px;
            height: 50px;
            background-color: black;
            margin-bottom: 10px;
        }

        ul li {
            display: inline;
            color: white;
        }

        #clear {
            clear: both;
        }

        #product {
            border: 0px solid red;
            width: 1300px;
            height: 558px;
        }

        #product_top {
            border: 0px solid blue;
            width: 100%;
            height: 45px;
            padding-top: 8px;
        }

        #product_bottom {
            border: 0px solid green;
            width: 100%;
            height: 500px;
        }

        #product_bottom_left {
            border: 0px solid red;
            width: 200px;
            height: 500px;
            float: left;
        }

        #product_bottom_right {
            border: 0px solid blue;
            width: 1094px;
            height: 500px;
            float: left;
        }

        #big {
            border: 0px solid red;
            width: 544px;
            height: 248px;
            float: left;
        }

        .small {
            border: 0px solid blue;
            width: 180px;
            height: 248px;
            float: left;
            /* 让内容居中对齐 */
            text-align: center;
        }

        #bottom {
            text-align: center;
        }

        a {
            text-decoration: none;
        }
    </style>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
    $(function(){
        // 1. 编写显示广告图片的定时操作
        time =setInterval("showAdvert()",3000);
    });

    // 2. 编写显示广告图片的函数
    function showAdvert(){
        // 获取广告图片，并让其显示出来
        // $("#img2").show(1000);
        // $("#img2").slideDown(5000);
        // 渐入
        $("#img2").fadeIn(4000);
        // 4. 清除显示图片的定时操作
        clearInterval(time);
        // 5. 设置隐藏图片的定时操作
        time = setInterval("hideAdvert()", 3000);
    }

    function hideAdvert(){
        // 6. 获取广告图片，并让其隐藏
        // $("#img2").hide();
        // $("#img2").slideUp(5000);
        // 渐出
        $("#img2").fadeOut(6000);
        // 7. 清除隐藏图片的定时操作
        clearInterval(time);
    }
</script>

</head>

<body>
    <div id="father">
        <!-- 定时弹出广告图片位置 -->
        <img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>

        <!-- 1. logo部分 -->
        <div id="logo">
            <div class="top">
                <img src="../../img/logo2.png" height="46px" />
            </div>
            <div class="top">
                <img src="../../img/header.png" height="46px" />
            </div>
            <div class="top" id="top">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </div>
        </div>
        <div id="clear"></div>
        <!-- 2.导航栏部分 -->
        <div id="menu">
            <ul>
                <a href="#">
                    <li style="font-size: 20px;">首页</li>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">
                    <li>手机数码</li>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">
                    <li>家用电器</li>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">
                    <li>鞋靴箱包</li>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">
                    <li>孕婴保健</li>
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">
                    <li>奢侈品</li>
                </a>
            </ul>
        </div>

        <!-- 3.轮播图部分 -->
        <div id="">
            <img src="../../img/1.jpg" width="100%" id='img1' />
        </div>
        <!-- 4.最新商品 -->
        <div id="product">
            <div id="product_top">
                <span style="font-size: 25px;padding-top: 8px;">最新商品</span>
                <img src="../../img/title2.jpg" />
            </div>
            <div id="product_bottom">
                <div id="product_bottom_left">
                    <img src="../../img/big01.jpg" width="100%" height="100%" />
                </div>
                <div id="product_bottom_right">
                    <div id="big">
                        <img src="../../img/middle01.jpg" width="100%" height="100%" />
                    </div>
                    <div class="small">
                        <img src="../../img/small01.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small02.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small03.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small04.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small05.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small06.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small07.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small08.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small09.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 5.广告图片 -->
        <div id="">
            <img src="../../img/ad.jpg" width="100%" />
        </div>

        <!-- 6.热门商品 -->
        <div id="hot_product">
            <div id="product_top">
                <span style="font-size: 25px;padding-top: 8px;">最新商品</span>
                <img src="../../img/title2.jpg" />
            </div>
            <div id="product_bottom">
                <div id="product_bottom_left">
                    <img src="../../img/big01.jpg" width="100%" height="100%" />
                </div>
                <div id="product_bottom_right">
                    <div id="big">
                        <img src="../../img/middle01.jpg" width="100%" height="100%" />
                    </div>
                    <div class="small">
                        <img src="../../img/small01.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small02.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small03.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small04.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small05.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small06.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small07.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small08.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                    <div class="small">
                        <img src="../../img/small09.jpg" />
                        <a href="#">
                            <p style="color: gray;">电炖锅</p>
                        </a>
                        <p style="color: red;">399</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 7.广告图片 -->
        <div id="">
            <img src="../../img/footer.jpg" width="100%" />
        </div>

        <!-- 8.友情链接和版权信息 -->
        <div id="bottom">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">招贤纳士</a>
            <a href="#">法律声明</a>
            <a href="#">友情链接</a>
            <a href="#">支付方式</a>
            <a href="#">配送方式</a>
            <a href="#">服务声明</a>
            <a href="#">广告声明</a>
            <p>
                Copyright © 2005-2016 传智商城 版权所有
            </p>
        </div>
    </div>

</body>

</html>